<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <!-- 列定义 -->
      <el-table-column label="流程名称" prop="processName"></el-table-column>
      <el-table-column label="流程当前节点名称" prop="currentNodeName"></el-table-column>
      <el-table-column label="申请人姓名" prop="applierName"></el-table-column>
      <el-table-column label="流程状态" prop="statusStr"></el-table-column>
      <el-table-column label="流程发起时间" prop="processCreateTime"></el-table-column>
      <el-table-column v-if="type !== '1'" label="任务生成时间" prop="taskCreateTime"></el-table-column>
      <el-table-column v-if="type === '3'" label="用户审批时间" prop="userApproveTime"></el-table-column>
      <el-table-column v-if="type === '3'" label="审批内容" prop="userOpinion"></el-table-column>
      <el-table-column label="Actions" width=400>
        <template v-slot="scope">
          <!-- 详情按钮 -->
          <el-button @click="showDetails(scope.row.instanceId)">流程详情</el-button>
          <el-button v-if="type === '2'" type="primary" @click="approveTask(scope.row)">审批流程</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
        v-model="dialogVisible"
        title="审批流程"
        width="50%"
        :before-close="handleClose"
    >
      <div class="approval-dialog">
        <div class="form-group">
          <label class="form-label">审批意见:</label>
          <el-input v-model="approveForm.opinion" class="form-input"></el-input>
        </div>

        <div class="form-group">
          <label class="form-label">选择操作:</label>
          <el-radio-group v-model="approveForm.action">
            <el-radio label="1">审批通过</el-radio>
            <el-radio label="2" v-if="nodeOptions.length > 0">退回上一节点</el-radio>
            <el-radio label="3" v-if="nodeOptions.length > 0">退回申请人节点</el-radio>
            <el-radio label="4" v-if="nodeOptions.length > 0">路由任意节点</el-radio>
            <el-radio label="5" v-if="nodeOptions.length < 1">撤回</el-radio>
          </el-radio-group>
        </div>

        <div class="form-group" v-if="approveForm.action === '4'">
          <label class="form-label">选择节点:</label>
          <el-select v-model="approveForm.nodeCode" class="form-input">
            <el-option
                v-for="option in nodeOptions"
                :key="option.value"
                :label="option.label"
                :value="option.value"
            ></el-option>
          </el-select>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
    <el-button @click="handleCancel">取消</el-button>
    <el-button type="primary" @click="handleApprove">提交</el-button>
  </span>
    </el-dialog>


  </div>
</template>

<script>
import request from "@/request/request";
import {ElMessage} from "element-plus";

export default {
  props: {
    type: String, // 传入的数据数组
  },
  data() {
    return {
      tableData: [],
      dialogVisible: false, // 控制对话框的显示与隐藏
      approveForm: {
        opinion: "",
        action: "1",
        nodeCode: "",
        taskId: ""
      },
      nodeOptions: [], // Store dynamic node options
    };
  },
  mounted() {
    // 初始化时调用后端接口查询数据
    this.loadData();
  },
  methods: {
    showDetails(id) {
      console.log(id);
      this.$router.push({
        path: '/instanceDetail',
        query: {id: id}
      });
    },
    loadData() {
      // 在这里调用后端接口来获取数据，使用 this.currentPage 和 this.pageSize 作为参数
      // 更新 this.tableData 和 this.totalItems
      request.get("/approveInfo/pageList", {
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          type: this.type, // 传递 type 到后端
        },
      })
          .then((response) => {
            if (response.code === 200) {
              // 处理从后端获取的数据
              this.tableData = response.data.records;
              this.totalItems = response.data.total;
            } else {
              // 显示失败提示信息
              ElMessage.error(response.msg);
            }
          })
    },
    approveTask(row) {
      // 打开对话框
      this.dialogVisible = true;
      this.loadNodeOptions(row.processCode, row.currentNodeCode);
      this.approveForm = {
        opinion: "",
        action: "1",
        nodeCode: "",
        taskId: row.taskId
      }


    },
    loadNodeOptions(processCode, currentNode) {
      // Fetch dynamic node options from the backend
      request.get("/node/beforeList", {
        params: {
          currentNode: currentNode, // Use ":" instead of "="
          processCode: processCode, // Use ":" instead of "="
        },
      })
          .then((response) => {
            if (response.code === 200) {
              this.nodeOptions = response.data.map((option) => ({
                label: option.nodeName,
                value: option.nodeCode,
              }));
            } else {
              // Handle the error
              ElMessage.error(response.msg);
            }
          });
    },
    handleApprove() {
      if (!this.approveForm.opinion) {
        ElMessage.error('请填写审批意见'); // Opinion is required
        return;
      }

      if (!this.approveForm.action) {
        ElMessage.error('请选择操作'); // Action is required
        return;
      }

      if (this.approveForm.action === '4' && !this.approveForm.nodeCode) {
        ElMessage.error('路由请选择节点'); // NodeCode is required when action is 4
        return;
      }
      // Send a POST request with this.approveForm
      request.post('/testApproveTitle', this.approveForm)
          .then(response => {
            console.log(response)
            console.log(response.code)
            console.log(response.code === 200)
            console.log(response.code === '200')
            if (response.code === 200) {
              ElMessage.success('审核成功'); // Show a success message
              this.dialogVisible = false; // Close the dialog after successful approval
              this.loadData();
            } else {
              ElMessage.error(response.msg); // Show an error message
            }
          })
    },
  }
};
</script>

<style>
.approval-dialog {
  margin: 20px; /* Add margin around the content for spacing */
}

.form-group {
  margin-bottom: 10px; /* Add margin between form groups */
}

.form-label {
  display: inline-block;
  width: 100px; /* Adjust label width as needed */
}

.form-input {
  width: 70%; /* Adjust input width as needed */
}
</style>